<template>
  <div>
    <!-- 右边栏 -->
    <div class="right">
      <div class="side1">
        <a href="#">
          <img class="sideImg" src="@/assets/kefu/side-kefu.png" alt="" />
          <span class="sideText">联系客服</span>
        </a>
      </div>
      <div class="side2">
        <a href="#">
          <img class="sideImg" src="@/assets/kefu/side-tel.png" alt="" />
          <span class="sideText">177 5492 8306</span>
        </a>
      </div>
      <div class="side3">
        <a href="#">
          <img class="sideImg" src="@/assets/kefu/side-weixin.png" alt="" />
          <span class="sideText">11111111</span>
        </a>
      </div>
      <div class="side4">
        <a href="#">
          <img
            class="sideImg"
            src="@/assets/kefu/side-code.png"
            alt=""
            style="margin: 7px 0 0 7px"
          />
        </a>
        <div class="ewm">
          <img src="@/assets/ew.jpg" alt="" />
        </div>
      </div>
      <div class="side5" v-show="bool">
        <a href="#">
          <img
            class="sideImg"
            src="@/assets/kefu/side-top.png"
            alt=""
            @click="toTop"
          />
        </a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bool:false
    };
  },
  mounted() {
    // 给window添加一个滚动滚动监听事件
    window.addEventListener("scroll", this.handleScroll);
  },
  // 注意，如果离开该页面需要移除这个监听的事件，不然会报错
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
  },
  methods: {
    handleScroll() {
      /* 
      整体是获取页面滚动高度
      1.window.pageYOffset即scrollY 它会返回文档当前沿垂直轴（即向上或向下）滚动的像素数，其值为0.0，
      表示该Document的顶部边缘当前与窗口内容区域的顶部边缘对齐
      2.document.documentElement.scrollTop 获取当前页面的滚动条纵坐标位置 对应的是 html 标签
      3.document.body.scrollTop  对应的是 body 标签
      (||这个是定义时必须加的或者而不是定义时的另一种写法)
      */
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      // 监听元素到顶部的距离  并判断滚动的距离如果大于了元素到顶部的距离时，设置bool为true,否则就是false
      var offsetTop = document.querySelector("#header").offsetTop;
      if (scrollTop > offsetTop) {
        this.bool = true;
      } else {
        this.bool = false;
      }
    },
    toTop() {
      let top = document.documentElement.scrollTop || document.body.scrollTop;
      // 实现滚动效果
      const timeTop = setInterval(() => {
        document.body.scrollTop = document.documentElement.scrollTop = top -= 50;
        if (top <= 0) {
          clearInterval(timeTop);
        }
      }, 10);
    },
  },
};
</script>

<style lang="scss">
// 侧边
@mixin side {
  background: #333;
  transition: 500ms ease-in-out;
  // right和margin-right在position为relative时无效
  position: relative;
  height: 40px;
  margin-top: 3px;
  right: 0;
  display: flex;
  // align-items: center;
  float: right;
  width: 40px;
}
@mixin sideImg {
  margin: 7px 0 0 5px;
}
@mixin sideText {
  line-height: 40px;
  margin-left: 7px;
  position: absolute;
}
// 右侧边栏
.right {
  position: fixed;
  right: 0;
  top: 50%;
  z-index: 10;
  width: 50px;
  transform: translateY(-50%);
  .side4,
  .side5 {
    @include side;
  }
  .side1,
  .side2,
  .side3 {
    box-sizing: border-box;
    @include side;
    &:hover {
      margin-right: 0;
      background: #0595c7;
    }
  }
  .side1 {
    width: 120px;
    margin-right: -80px;
  }
  .side2,
  .side3 {
    width: 170px;
    margin-right: -130px;
  }
  .side4:hover .ewm {
    display: block;
  }
  .ewm {
    display: none;
    position: absolute;
    right: 42px;
    top: -30px;
    img {
      width: 100px;
      height: 100px;
    }
  }
  a {
    text-decoration: none;
    list-style: none;
    color: #fff;
    .sideImg {
      @include sideImg;
    }
    .sideText {
      @include sideText;
    }
    &:hover {
      background-position: 50px;
    }
  }
}
</style>